<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec= "http://www.thymeleaf.org/extras/spring-security" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,myUser-scalable=no">
    <title>主界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>

    <div class="container">
        <!-- --t是自定义属性，通过var函数可调用 -->
        <li style="--t:20%;">
            <a href="#">
                <i class="fa fa-home" aria-hidden="true"></i>
            </a>
        </li>
        <li style="--t:30%;">
            <a href="#">
                <i class="fa fa-th-large" aria-hidden="true"></i>
            </a>
        </li>
        <li style="--t:40%;">
            <a href="#">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
        </li>
        <li style="--t:50%;">
            <a href="#">
                <i class="fa fa-myUser" aria-hidden="true"></i>
            </a>
        </li>
        <li style="--t:60%;">
            <a href="#">
                <i class="fa fa-cog" aria-hidden="true"></i>
            </a>
        </li>
        <li style="--t:70%;">
            <a href="#">
                <i class="fa fa-sign-out" aria-hidden="true"></i>
            </a>
        </li>
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
    <header>
        <a href="#" class="logo">承志</a>
        <ul>
            <li><a href="#">探索工作</a></li>
            <li><a href="#">相关推荐</a></li>
            <li><a href="#">二手交易</a></li>
            <li><a href="#">服务类型</a></li>
            <li><a href="/test">工作福利</a></li>
            <li sec:authorize="isAnonymous()"><a href="/login">登陆/注册</a></li>
            <li sec:authorize="isAuthenticated()"><a sec:authentication="name"></a></li>
            <li sec:authorize="isAuthenticated()">
                <form th:action="@{/logout}" method="post">
                    <input type="submit" value="退出" class="logout">
                </form>
            </li>

        </ul>
    </header>

    <section class="banner1"></section>
    <div class="container1">
        <div class="filter">
            <span>已选条件：</span>
            <div class="item">
                <!--<a>
                    x  <span>惠普</span>
                </a> -->
            </div>
        </div>
        <div class="store">
            <dl>
                <dt>工作：</dt>
                <dd><div><a>全部</a></div></dd>
                <dd><div><a>水电工</a></div></dd>
                <dd><div><a>建筑工</a></div></dd>
                <dd><div><a>焊工</a></div></dd>
                <dd><div><a>保安</a></div></dd>
                <dd><div><a>宝洁</a></div></dd>
                <dd><div><a>钟点工</a></div></dd>
                <dd><div><a>司机</a></div></dd>
            </dl>
            <dl>
                <dt>薪资：</dt>
                <dd><div><a>全部</a></div></dd>
                <dd><div><a>1000~2000</a></div></dd>
                <dd><div><a>2000~3000</a></div></dd>
                <dd><div><a>3000~4000</a></div></dd>
                <dd><div><a>4000~5000</a></div></dd>
                <dd><div><a>5000~6000</a></div></dd>
                <dd><div><a>6000~7000</a></div></dd>
                <dd><div><a>7000以上</a></div></dd>
            </dl>
            <dl>
                <dt>工作区域：</dt>
                <dd><div><a>全部</a></div></dd>
                <dd><div><a>选项1</a></div></dd>
                <dd><div><a>选项2</a></div></dd>
                <dd><div><a>选项3</a></div></dd>
                <dd><div><a>选项4</a></div></dd>
                <dd><div><a>选项5</a></div></dd>
                <dd><div><a>选项6</a></div></dd>
                <dd><div><a>选项7</a></div></dd>
            </dl>
            <dl>
                <dt>工作福利：</dt>
                <dd><div><a>全部</a></div></dd>
                <dd><div><a>选项1</a></div></dd>
                <dd><div><a>选项2</a></div></dd>
                <dd><div><a>选项3</a></div></dd>
                <dd><div><a>选项4</a></div></dd>
                <dd><div><a>选项5</a></div></dd>
                <dd><div><a>选项6</a></div></dd>
                <dd><div><a>选项7</a></div></dd>
            </dl>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        var arr = [];
        $(function(){

            $(".store dt+dd a").attr("class","all-color");
            $(".store a").click(function(){

                $(this).attr("class");

                $(this).parentsUntil("dl").parent().hide();

                arr.push($(this));
                var val = $(this).html();

                var domItem = `<a
                                    onclick=deletes('${val}')
                                    rel='${val}'
                                >
                                x  <span>${val}</span>
                                </a>`;
                $(".item").append(domItem);
            })
        })
        function deletes(val){
            $(".filter").find("a[rel='"+val+"']").remove();
            for(var i=0;i<arr.length;i++){
                if(arr[i].html() == val ){
                    arr[i].parentsUntil("dl").parent().show();
                    arr.splice(i,1);
                    i--;
                }
                else{
                    arr[i].parentsUntil("dl").parent().hide();
                }
            }
        }
    </script>

    <div class="card" th:each="work:${session.works}">
        <div class="photo"><img th:src="${work.imgUrl}">images/works/carry.jpg</div>
        <h1 th:text="${work.name}">搬砖</h1>
        <h2></h2>
        <p th:text="${work.brief}">这是工作一，日进斗金。</p>
        <a href="#">了解更多</a>
    </div>

    <section class="banner1"></section>

    <script>
        // 鼠标滚轮滚动事件
        window.addEventListener("scroll",()=>{
            let header=document.querySelector("header");
            header.classList.toggle("sticky",window.scrollY>0);
        })
    </script>
</body>

</html>